<template>
  <div
    style="
      width: 400px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    "
  >
    <transition name="el-fade-in-linear">
      <el-card
        class="box-card"
        shadow="hover"
        style="text-align: center"
        @keyup.enter.native="login"
      >
        <div slot="header" class="clearfix" style="text-align: center">
          <h2 style="font-size: 1rem">校园疫情管理系统</h2>
        </div>
        <el-input
          prefix-icon="el-icon-user-solid"
          v-model="input_user"
          placeholder="请输入用户名"
          class="inp"
        ></el-input>
        <div style="height: 1.3rem"></div>
        <el-input
          prefix-icon="el-icon-lock"
          placeholder="请输入密码"
          v-model="input_pwd"
          show-password
          class="inp"
        ></el-input>
        <el-radio-group
          v-model="radio3"
          size="small"
          style="
            display: flex;
            justify-content: space-around;
            margin-top: 1.3rem;
          "
        >
          <el-radio label="1" border @change="changeLogin(1)">管理员</el-radio>
          <el-radio label="2" border @change="changeLogin(2)">学生</el-radio>
          <el-radio label="3" border @change="changeLogin(3)">教师</el-radio>
        </el-radio-group>
        <el-button type="primary" class="button" size="small" @click="login1"
          >登录</el-button
        >
      </el-card>
    </transition>
  </div>
</template>
<script>
import { GetHomeAPI, LoginAPI } from '../../request/users'
export default {
  name: "Login",
  data() {
    return {
      input_user: "鸿基",
      input_pwd: "1",
      radio3: "1",
    };
  },
  methods: {
    // login1() {
    //   GetHomeAPI().then(function (res) {
    //     console.log(res);
    //   })
    // },
    login1() {
      if (!this.input_user || !this.input_pwd) {
        this.open3("用户名,密码1不能为空");
        this.input_user = "";
        this.input_pwd = "";
      }
      else {
        LoginAPI({
          username: this.input_user,
          password: this.input_pwd,
          type: this.radio3,
        }).then(result => {
          console.log(result);
          if (result.data == "用户名或者账号输入错误") {
            // this.$message.error("用户名或者密码输入错误");
            this.input_pwd = "";
            this.input_user = "";
          }
          else {
            window.localStorage.setItem("token", result.data.jwt_token);
            if (this.radio3 == 1)
              window.location.href = " http://localhost:81/#/admin/home";
            if (this.radio3 == 2)
              window.location.href = " http://localhost:81/#/student/home";
            if (this.radio3 == 3)
              window.location.href = " http://localhost:81/#/teacher/home";
          }
        })
      }

    },
    /**
     * 登录
     * 用户名：username:this.input_user,
     * 密码：password:this.input_pwd,
     */
    login() {
      if (!this.input_user || !this.input_pwd) {
        this.open3("用户名,密码1不能为空");
        this.input_user = "";
        this.input_pwd = "";
      } else {
        this.$Axios({
          url: "/users/login",
          method: "post",
          data: {
            username: this.input_user,
            password: this.input_pwd,
            type: this.radio3,
          },
          success: (result) => {
            if (result == "用户名或者账号输入错误") {
              this.$message.error("用户名或者密码输入错误");
              this.input_pwd = "";
              this.input_user = "";
            }
            else {
              window.localStorage.setItem("token", result.jwt_token);
              if (this.radio3 == 1)
                window.location.href = " http://localhost:81/#/admin/home";
              if (this.radio3 == 2)
                window.location.href = " http://localhost:81/#/student/home";
              if (this.radio3 == 3)
                window.location.href = " http://localhost:81/#/teacher/home";
            }
          },
        });
      }
    },

    open3(v) {
      this.$message({
        message: v,
        type: "warning",
      });
    },
    changeLogin(type) {
      if (type == 1) {
        this.input_user = "鸿基";
        this.input_pwd = "1";
      }
      else if (type == 2) {
        this.input_user = "刘秋明";
        this.input_pwd = "2";
      }
      else if (type = 3) {
        {
          this.input_user = "肯";
          this.input_pwd = "1";
        }
      }

    }
  },
};
</script>
<style lang="scss" scoped>
.login {
  h3 {
    text-align: center;
    height: 60px;
    line-height: 20px;
    border-bottom: 1px solid rgb(170, 170, 170);
    color: rgb(92, 92, 92);
  }
  .inp {
    margin-top: 10px;
  }
  .button {
    margin-top: 20px;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>